<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>jQuery手机触屏滑动导航代码</title>
    <link rel="stylesheet" href="../css/common.min.css">
    <link rel="stylesheet" href="../scripts/plugins/h5_nav/h5_nav.css">
</head>
<body>
<h2 class="htit">demo示例一</h2>
<div class="wrapper wrapper_1st" id="retr">
    <div class="scroller">
        <ul class="clearfix">
            <li><a href="javascript:void(0)">全部科目</a></li>
            <li><a href="javascript:void(0)">会计从业</a></li>
            <li><a href="javascript:void(0)">会计职称</a></li>
            <li><a href="javascript:void(0)">注会</a></li>
            <li><a href="javascript:void(0)">税务师</a></li>
            <li><a href="javascript:void(0)">国际证书</a></li>
            <li><a href="javascript:void(0)">更多</a></li>
            <li><a href="javascript:void(0)">更多注会</a></li>
            <li><a href="javascript:void(0)">国际证书2</a></li>
            <li><a href="javascript:void(0)">更多4</a></li>
            <li><a href="javascript:void(0)">更多5</a></li>
        </ul>
    </div>
</div>
<h2 class="htit">demo示例二</h2>
<div class="wrapper wrapper_2nd" id="wrapper02">
    <div class="scroller">
        <ul class="clearfix">
            <li><a href="javascript:void(0)">全部科目</a></li>
            <li><a href="javascript:void(0)">会计从业</a></li>
            <li><a href="javascript:void(0)">会计职称</a></li>
            <li><a href="javascript:void(0)">注会</a></li>
            <li><a href="javascript:void(0)">税务师</a></li>
            <li><a href="javascript:void(0)">国际证书</a></li>
            <li><a href="javascript:void(0)">更多</a></li>
            <li><a href="javascript:void(0)">更多注会</a></li>
            <li><a href="javascript:void(0)">国际证书2</a></li>
            <li><a href="javascript:void(0)">更多4</a></li>
            <li><a href="javascript:void(0)">更多5</a></li>
        </ul>
    </div>
</div>
<h2 class="htit">demo示例三</h2>
<div class="wrapper wrapper_3th" id="wrapper03">
    <div class="scroller">
        <ul class="clearfix">
            <li><a href="javascript:void(0)">全部科目</a></li>
            <li><a href="javascript:void(0)">会计从业</a></li>
            <li><a href="javascript:void(0)">会计职称</a></li>
            <li><a href="javascript:void(0)">注会</a></li>
            <li><a href="javascript:void(0)">税务师</a></li>
            <li><a href="javascript:void(0)">国际证书</a></li>
            <li><a href="javascript:void(0)">更多</a></li>
            <li><a href="javascript:void(0)">更多注会</a></li>
            <li><a href="javascript:void(0)">国际证书2</a></li>
            <li><a href="javascript:void(0)">更多4</a></li>
            <li><a href="javascript:void(0)">更多5</a></li>
        </ul>
    </div>
</div>
<h2 class="htit">demo示例四</h2>
<div class="wrapper wrapper_4th" id="sass">
    <div class="scroller">
        <ul class="clearfix">
            <li><a href="javascript:void(0)">全部科目</a></li>
            <li><a href="javascript:void(0)">会计从业</a></li>
            <li><a href="javascript:void(0)">会计职称</a></li>
            <li><a href="javascript:void(0)">注会</a></li>
            <li><a href="javascript:void(0)">税务师</a></li>
            <li><a href="javascript:void(0)">国际证书</a></li>
            <li><a href="javascript:void(0)">更多</a></li>
            <li><a href="javascript:void(0)">更多注会</a></li>
            <li><a href="javascript:void(0)">国际证书2</a></li>
            <li><a href="javascript:void(0)">更多4</a></li>
            <li><a href="javascript:void(0)">更多5</a></li>
        </ul>
    </div>
</div>
<h2 class="htit">demo示例五</h2>
<div class="wrapper_3th" id="demo05">
    <div class="scroller">
        <ul class="clearfix">
            <li><a href="javascript:void(0)">全部科目</a></li>
            <li><a href="javascript:void(0)">会计从业</a></li>
            <li><a href="javascript:void(0)">会计职称</a></li>
            <li><a href="javascript:void(0)">注会</a></li>
            <li><a href="javascript:void(0)">税务师</a></li>
            <li><a href="javascript:void(0)">国际证书</a></li>
            <li><a href="javascript:void(0)">更多</a></li>
            <li><a href="javascript:void(0)">更多注会</a></li>
            <li><a href="javascript:void(0)">国际证书2</a></li>
            <li><a href="javascript:void(0)">更多4</a></li>
            <li><a href="javascript:void(0)">更多5</a></li>
        </ul>
    </div>
</div>
<h2 class="htit">demo示例六</h2>
<div class="wrapper_2nd" id="demo06">
    <div class="scroller">
        <ul class="clearfix">
            <li><a href="javascript:void(0)">北京</a></li>
            <li><a href="javascript:void(0)">上海</a></li>
            <li><a href="javascript:void(0)">广州</a></li>
            <li><a href="javascript:void(0)">深证</a></li>
            <li><a href="javascript:void(0)">杭州</a></li>
            <li><a href="javascript:void(0)">武汉</a></li>
            <li><a href="javascript:void(0)">天津</a></li>
            <li><a href="javascript:void(0)">郑州</a></li>
            <li><a href="javascript:void(0)">海口</a></li>
            <li><a href="javascript:void(0)">郑州</a></li>
            <li><a href="javascript:void(0)">长春</a></li>
            <li><a href="javascript:void(0)">长沙</a></li>
            <li><a href="javascript:void(0)">南京</a></li>
            <li><a href="javascript:void(0)">西安</a></li>
        </ul>
    </div>
</div>

<script type="text/javascript" src="../scripts/vendor/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<!--手机缩放js  可有可无-->
<script type="text/javascript" src="../scripts/plugins/h5_nav/flexible.js"></script>
<!--滚动js-->
<script type="text/javascript" src="../scripts/plugins/h5_nav/iscroll.js"></script>
<!--原js-->
<!--<script type="text/javascript" src="../scripts/plugins/h5_nav/navbarscroll.js"></script>-->
<!--封装后js-->
<script type="text/javascript" src="../scripts/plugins/h5_nav/h5_nav.js"></script>
<script type="text/javascript">
    $(function () {

        //demo示例一到四 通过lass调取，一句可以搞定，用于页面中可能有多个导航的情况
        $(".wrapper").navbarscroll();

        //demo示例五 通过id调取
        $("#demo05").navbarscroll({
            defaultSelect: 6,
            afterClickNav: function (obj) {
                console.log(obj.text())
            }
        });

        //demo示例六 通过id调取
        $("#demo06").navbarscroll({
            defaultSelect: 3,
            scrollerWidth: 5,
            fingerClick: 1,
            afterClickNav: function (obj) {
                console.log(obj.text())
            }
        });
    });
</script>
</body>
</html>
